import { useEffect, useState } from 'react';
import { prorListApi, categoryApi, searchApi } from '@/api/pro';
import {
  Table,
  Image,
  Switch,
  Button,
  Space,
  Pagination,
  Form,
  Input,
  Select,
} from 'antd';

import './list.less';

const Index = () => {
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [count, setCount] = useState(1);
  const [limitNum, setLimitNum] = useState(10);

  const [options, setOptions] = useState([]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
    },
    {
      title: '产品名称',
      dataIndex: 'proname',
      width: 200,
    },
    {
      title: '产品图片',
      // dataIndex: 'img1',
      render(text: string, record: any) {
        return <Image src={record.img1}></Image>;
      },
      width: 150,
    },
    {
      title: '产品分类',
      dataIndex: 'category',
    },
    {
      title: '产品品牌',
      dataIndex: 'brand',
    },
    {
      title: '价格',
      dataIndex: 'originprice',
    },
    {
      title: '折扣',
      dataIndex: 'discount',
    },
    {
      title: '库存',
      dataIndex: 'stock',
    },
    {
      title: '是否售卖',
      dataIndex: 'issale',
      render(text: number) {
        return (
          <Switch
            checkedChildren="是"
            unCheckedChildren="否"
            checked={text === 1}
          />
        );
      },
    },
    {
      title: '操作',
      render() {
        return (
          <Space>
            <Button>编辑</Button>
            <Button danger>删除</Button>
          </Space>
        );
      },
    },
  ];

  useEffect(() => {
    prorListApi({
      count: count,
      limitNum: limitNum,
    }).then((res) => {
      if (res) {
        const result = res.data.map((item: any, index: number) => ({
          ...item,
          key: index + 1,
        }));
        setDataSource(result);
        setTotal(res.total);
      }
    });
  }, [count, limitNum]);

  useEffect(() => {
    categoryApi().then((res) => {
      // console.log(res);
      setOptions(
        res.data.map((item: string) => {
          return { value: item, label: item };
        }),
      );
    });
  }, []);

  const change = (page: number, pageSize: number) => {
    console.log(page, pageSize);
    setCount(page);
    setLimitNum(pageSize);
  };

  const onFinish = (values: any) => {
    // console.log('Finish:', values);
    searchApi(values).then((res) => {
      console.log(res);
    });
  };

  return (
    <div>
      <Form name="horizontal_login" layout="inline" onFinish={onFinish}>
        <Form.Item name="category" label="分类">
          <Select style={{ width: 120 }} allowClear options={options} />
        </Form.Item>
        <Form.Item name="search" label="关键字">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table dataSource={dataSource} columns={columns} pagination={false} />
      <Pagination total={total} onChange={change} />
    </div>
  );
};

export default Index;
